<template>
    <div style="padding:0 1.25rem 1.25rem 1.25rem;">
        <div >
        <el-row class="content2_left_b">

            <el-row class="content2_left_b">

                <el-col :span="4">
                    <div class="ti">用户分析</div>
                </el-col>
                <el-col :span="4">
                    <div style="color:rgb(154, 152, 150)"></div>
                </el-col>
                <el-col :span="12" style="text-align: right;">
                    <div style="margin-right: 20px">
                        <el-radio-group @change="click" v-model="radio" size="medium">
                            <el-radio-button label="1">近一天</el-radio-button>
                            <el-radio-button label="7">近七天</el-radio-button>
                            <el-radio-button label="30">近三十天</el-radio-button>
                            <el-radio-button label="日"></el-radio-button>
                            <el-radio-button label="周"></el-radio-button>
                            <el-radio-button label="月"></el-radio-button>
                            <el-radio-button label="大促"></el-radio-button>
                        </el-radio-group>
                    </div>
                </el-col>
                <el-col :span="4">
                    <el-button size="small"><i class="el-icon-download"></i>下载明细</el-button>
                </el-col>

            </el-row>
            <el-row v-loading="loading" @click="get_to('https://fxg.jinritemai.com/ffa/mvip/assets/overview?btm_ppre=a0.b0.c0.d0&btm_pre=a0.b0.c0.d0')" class="content2_left_b row" type="flex" justify="center">
                <el-col :span="5">
                    <div class="title_1">
                        总成交金额
                    </div>
                    <div class="title_2">
                        ￥{{khfx[0].value.value?(khfx[0].value.value)/100:0}}
                    </div>
                    <div class="title_3">
                        较前1日 <span style="color:rgb(97, 215, 47) ;">{{khfx[0].change_value.value==[]?0:khfx[0].change_value.value}} </span>  较同行优秀 <span style="color:rgb(251, 16, 16) ;">{{khfx[0].peer_excellent.value}}  </span>
                    </div>

                </el-col>
                <el-col :span="1" class="bs">=</el-col>
                <el-col :span="5">
                    <div class="title_1">
                        用户成交人数
                    </div>
                    <div class="title_2">
                        {{khfx[1].value.value==null?0:khfx[1].value.value}}
                    </div>
                    <div class="title_3">
                        较前1日 <span style="color:rgb(97, 215, 47) ;">{{khfx[1].change_value.value==null?0:khfx[1].change_value.value}} </span>  较同行优秀 <span style="color:rgb(251, 16, 16) ;">{{khfx[1].peer_excellent.value==null?0:khfx[1].peer_excellent.value}}  </span>
                    </div>

                </el-col>
                <el-col :span="1" class="bs">*</el-col>
                <el-col :span="4">
                    <div class="title_1">
                        用户客单价
                    </div>
                    <div class="title_2">
                        ￥{{khfx[2].value.value==null?0:(khfx[2].value.value)/100}}
                    </div>
                    <div class="title_3">
                        较前1日 <span style="color:rgb(97, 215, 47) ;">{{khfx[2].change_value.value==null?0:khfx[2].change_value.value}} </span>  较同行优秀 <span style="color:rgb(251, 16, 16) ;">{{khfx[2].peer_excellent.value==null?0:khfx[2].peer_excellent.value}}  </span>
                    </div>
                </el-col>
                <el-col :span="1" class="bs"><el-button type="primary">查看趋势</el-button></el-col>
            </el-row>

        </el-row>
    </div>
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        components: {

        },
        data() {
            return {
                radio: 1,
                khfx:[],
                loading:false
            };
        },
        created: function () {
            // 用户分析
            var that=this
            that.data_init()
           
        },
        mounted: function () {

            this.EchartsInit();
        },
        methods: {
            get_to(url){
                window.open(url, '_blank')
            },
            click(e){
                this.loading=true
                this.radio=e
                console.log(e)
                this.data_init()
            },
            data_init(){
                var that=this
                console.log(123)
                axios({
                method: 'get',
                url: 'http://doudian-api.fd1.cc/api/user_analysis?shop_id='+this.$store.state.shop_id+'&day='+that.radio
            })
                .then(function (response) {
                    if(response.data.data.data_head){
                        that.khfx=response.data.data.data_head
                    }
                    console.log('用户分析',response.data.data)
             
                    
                    // that.twjy=response.data.data
                    that.loading=false
                })
                .catch(function (error) {
                    console.log(error)
                })
            },
            EchartsInit() {

            }
        }
    }
</script>
<style lang="less">
    .ti {
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-weight: bold;
        margin-left: 0.375rem;
        margin-bottom: 0.1875rem;
        /* color: transparent; */
        /* background-image: linear-gradient(45deg, gold, purple, cyan, deeppink); */
        -webkit-background-clip: text;
    }
    .bs{
        display: flex;
    align-items: center;
    justify-content: center;
    }
    .title_1{
        font-size: 1rem;
        color: rgb(132, 132, 132);
    }
    .title_2{
        font-size: 1.5625rem;
       
    }
    .title_3{
        font-size: .8375rem;
       
    }
</style>